import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Checkbox, Form, Input, message } from 'antd';
import { useNavigate } from 'react-router-dom';
import { useState } from 'react';
import '../assets/style/login.css'

// 数据接口
import { getLoginApi, getMenusApi } from '../apis/users';



export default function Login() {
  const navigate = useNavigate();
  const [loading, setLoading] = useState(false)

  const onFinish = async (values) => {
    console.log('Received values of form: ', values);
    const i ={
      username:values.username,
      password:values.password
    } 
    setLoading(true)
    const res = await getLoginApi(i);
    console.log('res', res);
    setLoading(false)
    // 登录成功
    const { user, token, permissions, roles } = res.data;
    localStorage.token = token;
    localStorage.user = JSON.stringify(user);
    localStorage.permissions = JSON.stringify(permissions);
    localStorage.roles = JSON.stringify(roles);

    // // 获取菜单
    const menusArray = await getMenusApi()
    console.log('menusArray', menusArray);
    localStorage.menusArray = JSON.stringify(menusArray);

    // 登录成功提示消息
    message.success(res.message);
    //跳转页面
    navigate('/home', { replace: true })
  };

  return (
    <div className='login'>

      <div>

        <div className='login-logo'>
          <img src="http://xawn.f3322.net:8002/distremote/static/img/logo.png" alt="logo" />
          <span style={{ fontSize: '25px', fontWeight: 'bold' }}>赤兔养车</span>
        </div>

        <div>
          <Form
            name="normal_login"
            className="login-form"
            initialValues={{
              remember: true,
            }}
            onFinish={onFinish}
          >
            <Form.Item
              name="username"
              rules={[
                {
                  required: true,
                  message: '请输入用户名!',
                },
              ]}
            >
              <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入用户名" />
            </Form.Item>

            <Form.Item
              name="password"
              rules={[
                {
                  required: true,
                  message: '请输入密码!',
                },
              ]}
            >
              <Input
                prefix={<LockOutlined className="site-form-item-icon" />}
                type="password"
                placeholder="请输入密码"
              />
            </Form.Item>
            <Form.Item>
              <Button type="primary" loading={loading} htmlType="submit" className="login-form-button" style={{ width: "300px" }}>
                登录
              </Button>
            </Form.Item>
            <Form.Item >
              <a href="">注册新账号</a>
              <a href="">商家入驻</a>
            </Form.Item>
          </Form>
        </div>

      </div>

    </div>
  );

}
